<template>
  <div class="micro-app-content">
    <!-- 只渲染内容区域，不包含侧边栏和头部 -->
    <router-view />
  </div>
</template>

<script>
export default {
  name: "MicroApp",
  mounted() {
    console.log("🎯 微应用内容区域已挂载");
    // 监听主应用传递的路由变化
    this.handleRouteChange();
  },
  methods: {
    handleRouteChange() {
      // 如果有路由参数传递，进行路由跳转
      const currentPath = this.$route.path;
      console.log("📍 当前微应用路由：", currentPath);
    },
  },
};
</script>

<style lang="less" scoped>
.micro-app-content {
  width: 100%;
  height: 100%;
  padding: 20px;
  background-color: #f5f5f5;

  // 移除默认的margin和padding
  box-sizing: border-box;

  // 确保内容区域有合适的样式
  min-height: 400px;
}
</style>
